// 获取进度条对象
const progressDom = document.querySelector(".progress")
// 获取文本对象
const textDom = document.querySelector(".text")

function rotateCircle(percent) {
    // 获取svg圆形环的总长，通过获取半径长度算出总长
    let circleLength = Math.floor(2 * Math.PI * parseFloat(progressDom.getAttribute("r")))
    // 按照百分比，算出进度环的长度
    let value = (percent * circleLength) / 100
    // red  rgb 255,0,0
    // blue rgb 0,191,255
    // let red = 255 + parseInt(((0 - 255) / 100) * percent)
    // let green = 255 + parseInt(((191 - 0) / 100) * percent)
    // let blue = 0 + parseInt(((255 - 0) / 100) * percent)
    
    // 设置stroke-dasharray和路径的颜色
    progressDom.setAttribute("stroke-dasharray", value + ",1000")
    progressDom.setAttribute("stroke", `rgb(88, 198, 205)`)
    // 设置文本内容和颜色
    textDom.innerHTML = percent + "%"
    textDom.setAttribute("fill", `black`)
}
// 30毫秒变化将进度+1
let num = 0
let id = setInterval(() => {
    num++
    if (num > 100) {
        num = 0
    }
    rotateCircle(num)
}, 50)
